这是一个轻量级、易嵌入的歌词播放组件,仿桌面歌词效果,适合在个人网页中加入🎧
支持歌词跟随播放进度滚动、歌词拖动、颜色自定义等功能。
desktop-lyrics-copy 文件夹,将其整个复制到你的项目目录中<script src="./desktop-lyrics-copy/js/embed.js"></script>
music/ 文件夹中替换 .mp3 音乐文件js/data.js ,修改 getMusicSrc() 中的音乐文件路径和 getLrc() 中的歌词内容( LRC 格式)打开 css/music.css ,修改 :root 中的颜色变量:
:root {
--color: #c6dbb4;
}
你可以替换成任何你喜欢的颜色,打造你的专属歌词风格✨
HTML + CSS + JavaScript(原生)
desktop-lyrics/
├── index.html 🪄 示例页面
├── desktop-lyrics-copy/ 📁 主项目文件夹
│ ├── css/
│ │ └── music.css 🎨 样式文件
│ ├── js/
│ │ ├── data.js 🎼 歌曲和歌词数据
│ │ ├── embed.js 🪄 嵌入脚本
│ │ └── music.js ⚙️ 播放控制逻辑
│ ├── music/ 🎧 音乐文件
├── LICENSE 📄 协议文件
└── README.md 📖 使用说明
MIT License
(可以自由使用、修改和发布,只需注明原作者即可)